<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- JS事件监听
          定义：即在后台记录我们的行为(按钮被点击,鼠标移到元素上,输入框失去焦点,按下键盘按键)，我们可以给这些事件绑定函数，
          当事件触发时，可以自动的完成对应的功能，这就是事件监听。  
        代码块：
              事件源.addEventListener('事件类型'，要执行的函数)
            
         常见事件：
            1.鼠标事件：click :鼠标点击
                       mouseenter:鼠标移入
                       mouseleave：鼠标移出
            2.键盘事件：keydown:键盘按下触发
                       keyup:键盘拾起触发
            3.焦点事件：focus：获取焦点触发
                       blur:失去焦点触发
            4.表单事件：input：用户输入时触发
                       submit：表单提交时触发     
    -->
    <input type="button" id="btn1" value="点我一下试试1">                   
    <input type="button" id="btn2" value="点我一下试试2">

    <script>
    //事件监听 - addEventListener(可以多次绑定同一事件)
    document.querySelector('bth1').addEventListener('click',()=>{
        console.log('试试就试试~')
    })
    document.querySelector('bth1').addEventListener('click',()=>{
        console.log('试试就试试2~')
    })
    //事件监听 - 早期写法 - onclick(如果多次绑定同一事件，会覆盖)-了解
     document.querySelector('btn2').onclick = ()=>{
        console.log("试试就试试~~")
     }
     document.querySelector('btn2').onclick = ()=>{
        console.log("试试就试试22~~")
     }
    </script>
</body>
</html>